<template>

	<view class="content">

		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<view class="dingwei-box round bg-white middle" @click="location">
			<image src="/static/server/fas%20fa-crosshairs@1x.png" mode=""></image>
		</view>
		<!-- 自定义气泡 -->
		<view class="Callout-box bg-white padding-32 ">
			<view class="title text-bold">
				鸿雁社区地下停车场
			</view>
			<view class="desc">
				剩余公共车位：21
			</view>
		</view>
		<!-- 自定义气泡 -->

		<map :id='myMap' class="map-box" :style="{height: swiperHeight+'px'}" :latitude="me.latitude"  :longitude="me.longitude" :scale="scale" :markers="markers"  show-location
			@markertap="clickmarks">
		</map>

		<view class="middle" v-if="currentPoint">
			<view class="buttomBox bg-white">

				<view class="title-box">
					{{currentPoint.title}}
				</view>
				<view class="info-box  flex align-center">
					<view class="basis-xl left">
						<view class="">
							距您{{currentPoint.distance>1000?currentPoint.distance+"公里":currentPoint.distance+"米"}}
						</view>
						<view class="">
							目标车位：{{currentPoint.parking_lot}}
						</view>

					</view>
					<view class="basis-xs  right ">
						<view class="middle flex-wrap"
							@click="openMapByDefault(covers[0].latitude,covers[0].longitude,covers[0].name)">
							<view class="middle">
								<image class="daohanicon" src="/static/server/antOutline-compass@1x.png" mode="">
								</image>
							</view>
							<view class="basis-xll middle">导航</view>
						</view>
					</view>

				</view>

			</view>

		</view>



	</view>





</template>

<script>
	import cuCustom from '../components/header/cu_custom.vue'
	import {
		Request
	} from '../components/config/Request.js'
	import {
		getPointApi
	} from "@/static/server/api/api.js"
	let rquest = new Request();
	export default {
		components: {
			cuCustom,

		},
		data() {
			return {
				title: "位置导航",
				modalName: null,
				postData: null,
				swiperHeight: 0,
				scale: 14,
				myMap: 'myMap',
				mapCtx: {},
				markers: null, //停车点
				//绘制线路的数组
				polyline: [],
				distanceArr: [],
				currentPoint: null,
				me: { //默认位置
					latitude: 39.909,
					longitude: 116.39742,
				},
				target: [{
					id: 1,
					title: "鸿雁社区地下停车场",
					parking_lot: "C-0256",
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/server/p.png'

				}]

			}
		},
		onLoad(option) {


			//配置正确域名才可定位
			uni.showLoading({
				title: "加载中..."
			})
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: (res) => {
			// 		this.tocreate(res) //生成随机单车
			// 		this.latitude = res.latitude;
			// 		this.longitude = res.longitude;
			// 		uni.hideLoading();
			this.getInfoList(option.id); //获取数据

			// 	},
			// 	fail: (e) => {
			// 		console.log("获取位置失败")
			// 	}
			// })


		},
		mounted() {

			this.mapCtx = uni.createMapContext(this.myMap, this);

			rquest.getInfo().then((e) => {

				this.swiperHeight = e.winH - e.CustomBar;


			});
		},
		methods: {
			/**
			 * 获取停车点 
			 */
			getInfoList(id) {
				getPointApi(id).then(r => {
					uni.hideLoading();
					this.tocreate(r); //解析数据	
				}).catch(e => {
					uni.showModal({
						title: "提示",
						content: "获取信息失败，请稍后再试",
						showCancel: false,
						success: (e) => {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				})
			},

			/**
			 * 解析数据
			 * @param {Object} res
			 */
			tocreate(res) {
				console.log(res);
				let markers = [];

				//多个marker方法
				// for (let i in res) {
				// 	let distace = this.GetDistance(this.me.latitude, this.me.longitude, res[i].latitude, res[i]
				// 	.longitude); //计算距离
				// 	let target = {
				// 		id: res[i].id,
				// 		title: res[i].title,
				// 		iconPath: res[i].iconPath,
				// 		parking_lot:res[i].parking_lot,
				// 		latitude: res[i].latitude,
				// 		longitude: res[i].longitude,
				// 		distance: distace,
				// 		width: 30,
				// 		height: 36
				// 	}
				// 	markers.push(target);
				// }
				//单个maker的导航
				let distace = this.GetDistance(this.me.latitude, this.me.longitude, res.latitude, res.longitude);
				let target = {
					id: res.id,
					title: res.title,
					iconPath: res.iconPath,
					parking_lot: res.parking_lot,
					latitude: res.latitude,
					longitude: res.longitude,
					distance: distace,
					width: 30,
					height: 36
				}
				markers.push(target);
				this.markers = markers;
				// uni.setStorageSync("parkingPot", markers);
			},
			/**
			 * 计算距离
			 */
			GetDistance(lat1, lng1, lat2, lng2) {
				let radLat1 = lat1 * Math.PI / 180.0;
				let radLat2 = lat2 * Math.PI / 180.0;
				let a = radLat1 - radLat2;
				let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				s = parseInt(s * 1000);
				return s;
			},

			/**
			 * @param {Object} path
			 */
			jumpTo(item) {
				switch (item.type) {
					case "copy":
						uni.setClipboardData({
							data: this.postData.link,
							success: function() {
								uni.showToast({
									title: "成功复制到剪切板",
									icon: "none"
								})
							}
						});

						break;

					default:


						break;
				}
			},
	
			// 自动判断距离 最近的位置
			nearestP(res) {
				// 找出最近的停车场
				let markers = this.markers;
				let min_index = 0;
				let distanceArr = [];
				for (let i = 0; i < markers.length; i++) {
					let lon = markers[i].longitude;
					let lat = markers[i].latitude;
					// 计算距离
					let t = Math.sqrt((lon - res.longitude) * (lon - res.longitude) + (lat - res.latitude) * (lat - res
						.latitude));
					let distance = t;
					// 将每一次计算的距离加入数组 distanceArr
					distanceArr.push(distance)
				}
				//从距离数组中找出最小值，js是弱类型，数字不能直接比较大小。需要进行转换用 parseFloat（小数）  | parseInt（整数）
				let min = distanceArr[0];
				for (let i = 0; i < distanceArr.length; i++) {
					if (parseFloat(distanceArr[i]) < parseFloat(min)) {
						min = distanceArr[i];
						min_index = i;
					}
				}
				// 清楚旧的气泡，设置新气泡

			},
			/**
			 * 回到当前定位位置
			 */
			location() {
				
				console.log("定位功能");
			},

			/**
			 * 分享
			 */
			share() {
				uni.navigateTo({
					url: "./position"
				})
				return false;
				this.modalName = "bottomModal";
			},
			/**
			 * 取消分享
			 */
			cancel() {
				this.modalName = null;
			},
			/**
			 * 打开地图导航
			 */
			openMapByDefault(latitude, longitude, name) {
				console.log("open map");

				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: name,
					fail: () => {
						uni.showModal({
							content: '打开地图失败,请重'
						})
					},
				})

			},
			/**
			 *点击标记点
			 */
			clickmarks(e) {
				console.log(e);
				this.markers.forEach((item, key) => {
					if (item.id == e.detail.markerId) {
						this.currentPoint = item;

					}
				})
				this.$forceUpdate();
			}






		}


	}
</script>

<style scoped>
	@import url("@/static/server/css/basic.css");
	@import url("@/static/server/css/icon.css");
	@import url("@/static/server/css/modal.css");

	.map-box {
		width: 100vw;
	}

	.buttomBox {
		width: calc(100vw*(362/375));
		height: calc(100vw*(163/375));
		position: absolute;
		bottom: 12rpx;
		padding: 34rpx 52rpx;


	}

	.buttomBox .title-box {
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-bold;
	}

	.buttomBox .info-box {
		margin-top: 14rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.buttomBox .info-box .left view {
		margin-top: 8rpx;
	}

	.daohanicon {
		width: calc(100vw*(24/375));
		height: calc(100vw*(24/375));
	}

	.dingwei-box {
		width: calc(100vw*(35/375));
		height: calc(100vw*(35/375));
		text-align: center;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
		position: absolute;
		top: 120rpx;
		left: 22rpx;
		z-index: 999;

	}

	.dingwei-box image {
		width: calc(100vw*(21/375));
		height: calc(100vw*(21/375));
	}

	.Callout-box {
		position: absolute;
		top: 120rpx;
		z-index: 99;
		border-radius: 12rpx;
		font-size: 28rpx;
	}
</style>
